<template>
  <div class="">
    <el-form :inline="true"
             :model="query"
             class="query-form"
             size="small">
      <el-form-item class="query-form-item">
        <el-input v-model="query.name"
                  placeholder="请输入手机号"
                  prefix-icon="el-icon-search"
                  @keyup.enter.native="onSubmit"
                  clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-refresh"
                   @click="onRest"></el-button>
        <el-button type="primary"
                   icon="el-icon-search"
                   @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading"
              :data="list"
              :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
              border>
      <el-table-column label="营业执照编号"
                       prop="licenseNumber"
                       align="center"></el-table-column>
      <el-table-column label="注册时间"
                       prop="date"
                       align="center"></el-table-column>
      <el-table-column label="状态"
                       prop="type"
                       align="center">
      </el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="mini"
                     @click.native="showEdit(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑页面-->
    <el-dialog title="体验商城审核"
               :visible.sync="showEditPage"
               width="1000px"
               :before-close="closeDialog">
      <span>
        <ul class="topList">
          <li>用户名：OIUOK1984U98AJDOFJJJM</li>
          <li>公司名称：天津弘泰商贸有限公司</li>
          <li>营业执照编码：OIUOK1984U98AJDOFJJJM</li>
          <li>联系人：张红军</li>
          <li>联系方式：13901000001</li>
          <li>申请时间：2020/02/02</li>
        </ul>
        <h3 class="certificateTit">主营商品相关资质证件</h3>
        <div class="qualificationCertificate">
          <h4>营业执照</h4>
          <el-row :gutter="20">
            <el-col :span="6"
                    v-for="(item,index) in srcArr"
                    :key="index">
              <el-popover v-if="src"
                          placement="right"
                          trigger="hover">
                <img :src="src"
                     style="width:400px;border-radius:3px;">
                <img slot="reference"
                     :src="src"
                     style="max-height: 200px;max-width: 200px;border-radius:5px;">
              </el-popover>
              <p>经营企业-营业执照</p>
            </el-col>
          </el-row>
          <h4>商品类目：图文娱乐 - 儿童读物</h4>
          <el-row :gutter="20">
            <el-col :span="6"
                    v-for="(item,index) in srcArr"
                    :key="index">
              <el-popover v-if="src"
                          placement="right"
                          trigger="hover">
                <img :src="src"
                     style="width:400px;border-radius:3px;">
                <img slot="reference"
                     :src="src"
                     style="max-height: 200px;max-width: 200px;border-radius:5px;">
              </el-popover>
              <p>经营企业-营业执照</p>
            </el-col>
          </el-row>
          <ul class="bottomList">
            <li>生产日期：2020/01/01</li>
            <li>产品批次：第五次印刷</li>
            <li>中国环保产品认证：3423487JKJKJ</li>
            <li>其他内容：QMS；EMS；OHSMS；GMP：1234456</li>
          </ul>
        </div>
      </span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary"
                   @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            query: {
                name: "",
                status: "",
                currentPage: 1,
                pageSize: 10
            },
            list: [
                {
                    licenseNumber: "XDKKLJLKA7LKJK73498H",
                    date: "2020/09/01",
                    type: "已审核"
                },
                {
                    licenseNumber: "XDKKLJLKA7LKJK73498H",
                    date: "2020/09/01",
                    type: "已审核"
                },
                {
                    licenseNumber: "XDKKLJLKA7LKJK73498H",
                    date: "2020/09/01",
                    type: "已审核"
                },
                {
                    licenseNumber: "XDKKLJLKA7LKJK73498H",
                    date: "2020/09/01",
                    type: "已审核"
                },
                {
                    licenseNumber: "XDKKLJLKA7LKJK73498H",
                    date: "2020/09/01",
                    type: "已审核"
                }
            ],
            loading: false,
            showEditPage: false,
            src:
                "https://pics7.baidu.com/feed/7af40ad162d9f2d3c64187030938d5146127cce2.jpeg?token=cbf0751e5e2ce26497a76f773f4f9aca",
            srcArr: [1, 2, 3, 4, 5, 6]
        };
    },
    methods: {
        closeDialog() {
            this.showEditPage = false;
        },
        onRest() {
            this.query = {
                name: "",
                status: "",
                currentPage: 1,
                pageSize: 10
            };
            this.getList();
        },
        onSubmit() {
            this.query.currentPage = 1;
            this.getList();
        },
        getList() {
            this.loading = true;
            //   authRoleList(this.query)
            //     .then((response) => {
            //       if (response.code) {
            //         this.$message.error(response.message)
            //       }
            //       this.list = response.data.list || []
            //       this.totalNumber = response.data.totalNumber || 0
            //       setTimeout(() => {
            //         this.loading = false
            //       }, 0.3 * 1000)
            //     })
            //     .catch(() => {
            //       this.loading = false
            //       this.list = []
            //       this.totalNumber = 0
            //     })
        },
        showEdit() {
            this.showEditPage = true;
        }
    }
};
</script>

<style scoped lang="scss">
.topList {
    background-color: #f2f2f2;
    padding: 20px;
    li {
        line-height: 40px;
    }
}
.certificateTit {
    font-size: 20px;
    font-weight: 400;
    margin: 20px 0;
    color: #000;
}
.qualificationCertificate {
    border-top: 2px solid #8c8c8c;
    border-bottom: 2px solid #8c8c8c;
    h4 {
        font-size: 18px;
        font-weight: 400;
        color: #000;
        margin: 20px 0;
    }
    .el-col {
        div {
            min-height: 100px;
        }
    }
    img {
        display: block;
        margin: 10px auto;
    }
    p {
        text-align: center;
    }
    .bottomList {
        padding: 20px;
        li {
            line-height: 40px;
        }
    }
}
</style>
